<template>
	<basic-container>
		<avue-crud
			:option="option"
			:data="data"
			ref="crud"
			:table-loading="loading"
			:page="page"
			@refresh-change="refreshChange"
			@search-change="searchChange"
			@search-reset="searchReset"
			@current-change="currentChange"
			@size-change="sizeChange"
			@on-load="onLoad"
		>
			<template slot-scope="{ row }" slot="applyAreaName">
				<el-button size="mini" type="text" style="color: #606266;" @click="handleRowClick(1, row)">点击查看</el-button>
			</template>
			<template slot-scope="scope" slot="menu">
				<!-- <el-button type="text" size="mini" v-if="scope.row.bpmApplyStatus == -2" @click="editArea(scope.row)">发起流程</el-button> -->
				<el-button type="text" size="mini" v-if="scope.row.bpmApplyStatus == -2" @click="getBpmDia(scope.row)">写入流程表单</el-button>
				<el-button type="text" size="mini" @click="showDetail(scope.row)">查看明细</el-button>
			</template>
		</avue-crud>
		<el-dialog title="明细" :close-on-click-modal="false" :visible.sync="dialogVisibleEditArea" width="70%">
			<avue-crud
				:option="option1"
				:data="data1"
				ref="crud1"
				:table-loading="loading1"
				:page="page1"
				@refresh-change="refreshChange1"
				@search-change="searchChange1"
				@search-reset="searchReset1"
				@current-change="currentChange1"
				@size-change="sizeChange1"
				@on-load="onLoad1"
			>
				<template slot-scope="{ row }" slot="goodsSoRange">
					<el-button size="mini" type="text" style="color: #606266;" @click="handleRowClick(0, row)">点击查看</el-button>
				</template>
				<template slot-scope="{ row }" slot="applyAreas">
					<el-button size="mini" type="text" style="color: #606266;" @click="handleRowClick(1, row)">点击查看</el-button>
				</template>
				<template slot-scope="{ row }" slot="goodsMainPhotoUrl">
					<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
				</template>
			</avue-crud>
		</el-dialog>
		<el-dialog :title="showTitle" :visible.sync="currentGoodsVis" :close-on-click-modal="false" width="40%" center>
			<span style="padding: 20px;color: #000;" v-if="currentGoodsName.length > 0">{{ currentGoodsName }}</span>
			<div style="padding: 20px;max-height: 300px;overflow: scroll;line-height: 30px;">
				<el-tree :data="currentAreas" :default-expanded-keys="[]" node-key="id" accordion ref="goodsClassTree" highlight-current :props="propsClass"></el-tree>
			</div>
		</el-dialog>
		<el-dialog title="表单" :visible.sync="getBpmVis" :close-on-click-modal="false" width="60%" center>
			<el-form :model="form1" size="mini"  ref="changePwd" label-width="200px" class="demo-ruleForm">
			    <el-form-item label="搜索条件">
			        <el-input style="width: 60%;"  @input="change($event)" @blur="getName" v-model="form1.name" placeholder="请输入搜索条件"></el-input>
			      </el-form-item>
			      <el-form-item label="选择流程">
			        <el-select style="width: 60%;" @change="changeCode" v-model="form1.twoProjectCode" placeholder="请选择流程">
						<el-option
			                v-for="item in options"
			                :key="item.ProjectCode"
			                :label="item.ProjectName"
			                :value="item.ProjectCode">
						</el-option>
			        </el-select>
			      </el-form-item>
			</el-form>
			<div style="margin: 50px auto;">
				<div style="width:200px;margin: 0px auto;">
					<el-button type="primary" size="mini" @click="sureChange" :loading="loadBtn">保 存</el-button>
					<el-button size="mini" @click="cancel">取 消</el-button>
				</div>
			</div>
		</el-dialog>
	</basic-container>
</template>
<script>
import { getOrganizationTreeNodeByIds } from '@/api/base/goods/goods';
import { getResultList, getGoodsSoRangeTree, getList,writeSAPXmlToBPM,getBpmOrganization } from '@/api/base/store/checkCross.js';
import { getOrganizationMapByLevel } from '@/api/base/goods/addGoods';
var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
export default {
	data() {
		return {
			form1:{},
			loadBtn:false,
			options:[],
			addSoRangeOrganization: [], //选中的区域
			delSoRangeOrganization: [], //未选中的区域
			propsClass: {
				label: 'name',
				id: 'id',
				children: 'childrenNodes'
			},
			currentGoodsVis: false,
			getBpmVis: false,
			currentGoodsName: '',
			currentAreas: [],
			showTitle: '',
			query: {},
			loading: true,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			dialogVisibleEditArea: false,
			// treeData: [],
			currentUserOrganizationId: '',
			// defaultProps: {
			// 	children: 'childrenNodes',
			// 	label: 'name'
			// },
			checkeddataIds: [],
			checkeddataStr: [],
			obj: {},
			data: [
				{
					storeName: 'aaa'
				},
				{
					storeName: 'bbb'
				}
			],
			data1: [],
			query1: {},
			loading1: true,
			page1: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			option1: {
				size:'mini',
				border: true,
				page: false,
				align: 'center',
				menuAlign: 'center',
				menuType: 'button',
				editBtn: false,
				delBtn: false,
				addBtn: false,
				menu: false,
				fit: true,
				column: [
					{
						label: '店铺名称',
						prop: 'storeName',
						search: true
					},
					{
						label: '商品名称',
						prop: 'goodsName',
						search: true
					},
					{
						label: '商品图片',
						slot: true,
						prop: 'goodsMainPhotoUrl'
					},
					{
						label: '商城售价(￥)',
						prop: 'showPrice'
					},
					{
						label: '累计销量',
						prop: 'saleNum'
					},
					{
						label: '累计销售额',
						prop: 'saleAmount'
					},
					{
						label: '佣金额',
						prop: 'showCommissionValue'
					},
					{
						label: '状态',
						prop: 'bpmApplyStatus',
						search: true,
						dicData: Dict.BPM_APPLY_STATUS_ENUM,
						type: 'select',
						props: {
							label: 'label',
							value: 'value'
						}
					},
					{
						label: '商品已可见范围',
						prop: 'goodsSoRange',
						slot: true
					},
					{
						label: '审核开通的可见范围',
						prop: 'applyAreas',
						slot: true
					}
				]
			},
			editData: {},
			option: {
				size:'mini',
				border: true,
				page: false,
				align: 'center',
				menuAlign: 'center',
				menuType: 'button',
				editBtn: false,
				delBtn: false,
				addBtn: false,
				fit: true,
				column: [
					{
						label: '业务系统标识',
						prop: 'bsid'
					},
					{
						label: '业务类型',
						prop: 'btid'
					},
					{
						label: '店铺名称',
						prop: 'storeName'
					},
					{
						label: '店铺所属区域',
						prop: 'storeArea'
					},
					{
						label: '店铺入住时间',
						prop: 'storeJoinTime',
						width: 160
					},
					{
						label: '货方销方比例',
						prop: 'saleProportions'
					},

					{
						label: '申请时间',
						prop: 'addTime',
						width: 160
					},
					{
						label: '审核开通的可见范围',
						prop: 'applyAreaName',
						slot: true
					},
					{
						label: '申请状态',
						prop: 'bpmApplyStatus',
						search: true,
						dicData: Dict.BPM_APPLY_STATUS_ENUM,
						type: 'select',
						props: {
							label: 'label',
							value: 'value'
						}
					}
				]
			},
			fourLevel: []
		};
	},
	created() {
		getOrganizationMapByLevel({ level: 4 }).then(res => {
			if (res.data.code == 200) {
				this.fourLevel = res.data.data;
			}
		});
	},
	methods: {
		handleRowClick(type, row) {
			let ids = '';
			if (row.goodsSoRange && row.goodsSoRange.length > 0) {
				console.log(row);
				if (type == 0) {
					//商品已可见范围
					ids = row.goodsSoRange.substring(1, row.goodsSoRange.length - 1);
					this.showTitle = '商品已可见范围';
				} else {
					//审核开通的可见范围
					ids = row.applyAreaId.substring(1, row.applyAreaId.length - 1);
					this.showTitle = '审核开通的可见范围';
				}
				this.currentGoodsName = '商品名称：' + row.goodsName;
				getOrganizationTreeNodeByIds(ids).then(res => {
					if (res.data.code == 200) {
						this.currentAreas = res.data.data;
						this.currentGoodsVis = true;
					}
				});
			} else if (row.applyAreaId.length > 0) {
				ids = row.applyAreaId.substring(1, row.applyAreaId.length - 1);
				this.showTitle = '审核开通的可见范围';
				this.currentGoodsName = '';
				getOrganizationTreeNodeByIds(ids).then(res => {
					if (res.data.code == 200) {
						this.currentAreas = res.data.data;
						this.currentGoodsVis = true;
					}
				});
			} else if (row.startProcessUrl) {
				this.$message.warning('获取申请区域失败');
			} else {
				this.$message.warning('该商品未设置可见范围');
			}
		},
		// submitEdit() {
		// 	let data = {
		// 		addSoRangeOrganization:this.addSoRangeOrganization.join(','),
		// 		delSoRangeOrganization:this.delSoRangeOrganization.join(','),
		// 		id:this.editData.goodsId
		// 	};
		// 	editGoodsSoRange(data).then(res=>{
		// 		if(res.data.code==200){
		// 			this.$message.success('修改成功')
		// 			this.onLoad(this.page)
		// 		}else{
		// 			this.$message.error(res.data.message)
		// 		}
		// 	})
		// 	this.dialogVisibleEditArea = false;
		// },
		change(){
			this.$forceUpdate()
		},
		cancel() {
			this.loadBtn = false
			this.getBpmVis = false
		},
		sureChange() {
			this.loadBtn = true
			console.log(this.form1)
			if(this.form1.twoProjectName&&this.form1.twoProjectCode){
				writeSAPXmlToBPM(this.form1).then(res=>{
					if(res.data.code==200){
						this.form1={}
						this.form1.name = '北京'
						this.getBpmOri('北京')
						this.loadBtn = false
						this.getBpmVis = false
						this.onLoad(this.page);
						window.open(res.data.data)
						
					}else{
						this.loadBtn = false
						this.$message.error(res.data.message);
					}
				})
				
			}else{
				this.loadBtn = false
				this.$message.error('请选择流程');
			}
			
		},
		getName(){
			const re = /^[\u4e00-\u9fa5]+$/;
			if(!re.test(this.form1.name)){
				this.$message.error('请输入中文');
			}else{
				this.getBpmOri(this.form1.name)
			}
		},
		changeCode(e){
			console.log(e)
			this.options.forEach(item=>{
				if(item.ProjectCode == e){
					this.form1.twoProjectName = item.ProjectName
				}
			})
		},
		//写入流程表单
		getBpmDia(row){
			this.getBpmVis=true
			this.form1.applyId = row.id
			this.form1.name = '北京' 
			this.getBpmOri('北京')
			console.log(row)
		},
		getBpmOri(name){
			getBpmOrganization({name:name}).then(res=>{
				this.options = res.data.data
				console.log(this.options)
			})
		},
		editArea(row) {
			console.log('row:', row);
			window.open(row.startProcessUrl);
			// this.editData = row;
			// this.dialogVisibleEditArea = true;
			// this.getArealistFn(row.id);
		},
		showDetail(row) {
			this.dialogVisibleEditArea = true;
			this.query1.applyId = row.id;
			this.onLoad1(this.page1);
		},
		// handleCheckChange() {
		// 	this.addSoRangeOrganization = []
		// 	this.delSoRangeOrganization = []
		// 	let res = this.$refs.tree.getCheckedNodes();
		// 	let resHalf = this.$refs.tree.getHalfCheckedNodes();
		// 	res.forEach(res1=>{
		// 		this.addSoRangeOrganization.push(res1.id)
		// 	})
		// 	resHalf.forEach(resHalf1=>{
		// 		this.addSoRangeOrganization.push(resHalf1.id)
		// 	})
		// 	let ids = []
		// 	this.treeData.forEach(item=>{
		// 		ids.push(item.id)
		// 		item.childrenNodes.forEach(obj => {
		// 			ids.push(obj.id)
		// 			obj.childrenNodes.forEach(nodes => {
		// 				ids.push(nodes.id)
		// 				nodes.childrenNodes.forEach(child=>{
		// 					ids.push(child.id)
		// 				})
		// 			});
		// 		});
		// 	})
		// 	if(ids.length>0 &&this.addSoRangeOrganization.length>0){
		// 		this.addSoRangeOrganization.forEach(id=>{
		// 			var index = ids.indexOf(id);
		// 			if (index > -1) {
		// 				ids.splice(index, 1);
		// 			}
		// 		})
		// 	}
		// 	var index = ids.indexOf(2);
		// 	if (index > -1) {
		// 		ids.splice(index, 1);
		// 	}
		// 	this.delSoRangeOrganization = ids
		// },
		getArealistFn(id) {
			let data = {
				goodsCrossApplyId: id
			};
			getGoodsSoRangeTree(data).then(res => {
				if (res.data.success) {
					let goodsSoRangeIds = this.editData.goodsSoRange.split(',');
					let currentUserOrganizationId = res.data.data.currentUserOrganizationId;
					res.data.data.goodsSoRangeTree.forEach(item => {
						//一
						if (item.id == currentUserOrganizationId) {
							item.disabled = true;
							item.childrenNodes.forEach(obj => {
								//二
								obj.disabled = false;
								obj.childrenNodes.forEach(child => {
									//三
									child.disabled = false;
									child.childrenNodes.forEach(node => {
										//四
										node.disabled = false;
									});
								});
							});
						} else {
							item.disabled = true;
							item.childrenNodes.forEach(obj => {
								//二
								if (obj.id == currentUserOrganizationId) {
									obj.disabled = true;
									obj.childrenNodes.forEach(child => {
										//三
										child.disabled = false;
										child.childrenNodes.forEach(node => {
											//四
											node.disabled = false;
										});
									});
								} else {
									obj.disabled = true;
									obj.childrenNodes.forEach(child => {
										//三
										if (child.id == currentUserOrganizationId) {
											child.disabled = true;
											child.childrenNodes.forEach(node => {
												//四
												node.disabled = false;
											});
										} else {
											child.disabled = true;
											child.childrenNodes.forEach(node => {
												//四
												if (node.id == currentUserOrganizationId) {
													node.disabled = true;
												} else {
													node.disabled = true;
												}
											});
										}
									});
								}
							});
						}
					});
					setTimeout(() => {
						console.log(goodsSoRangeIds);
						let arr = [];
						goodsSoRangeIds.forEach(item => {
							if (this.fourLevel[Number(item)]) {
								arr.push(Number(item));
							}
						});
						this.treeData = res.data.data.goodsSoRangeTree;
						this.currentUserOrganizationId = currentUserOrganizationId;
						this.$refs.tree.setCheckedKeys(arr);
					}, 500);
				} else {
					this.$message.error(res.data.message);
				}
			});
		},
		searchReset() {
			this.query = {};
			this.onLoad(this.page);
		},
		//搜索
		searchChange(params, done) {
			this.page.currentPage = 1;
			this.query = params;
			this.onLoad(this.page, params, done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {}, done) {
			this.loading = true;
			getResultList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if (done) {
					done();
				}
				const data = res.data;
				this.page.total = data.count;
				this.data = data.data;
				this.loading = false;
			});
		},
		searchReset1() {
			let applyId = this.query1.applyId;
			this.query1 = {};
			this.query1.applyId = applyId;
			this.onLoad1(this.page1);
		},
		//搜索
		searchChange1(params) {
			this.page1.currentPage = 1;
			this.query1 = {...this.query1,...params}
			this.onLoad1(this.page1, params);
		},
		currentChange1(currentPage) {
			this.page1.currentPage = currentPage;
		},
		sizeChange1(pageSize) {
			this.page1.pageSize = pageSize;
		},
		refreshChange1() {
			this.onLoad1(this.page1);
		},
		onLoad1(page, params = {}, done) {
			this.loading1 = true;
			getList(page.currentPage, page.pageSize, Object.assign(params, this.query1)).then(res => {
				if (done) {
					done();
				}
				const data = res.data;
				this.page1.total = data.count;
				data.data.forEach(item => {
					let applyArea = item.applyArea.split(',');
					item.applyAreas = applyArea.join(' | ');
					// let storeArea = item.applyArea.split(',');
					// item.storeAreas = storeArea.join(' | ');
				});
				this.data1 = data.data;
				this.loading1 = false;
			});
		},
	}
};
</script>
